<style lang="less" scoped>
@primary-color:#FE9333;//橘黄色默认颜色
@write-color:#fff;//白色默认颜色
@font-color:#686E71;//默认黑色字体
@border-color:#E3E8EA;//默认边框
.textbox{
    .close{
        position: absolute;
        top:5px;
        right:10px;
        width: 20px;
        height: 20px;
        background:url('../images/assembly_close.png') no-repeat;
        cursor: pointer;
    }
    .btn{
        position: absolute;
        left:0;
        bottom: 11px;
        Button{
            width: 110px;
            height: 36px;
            padding: 0;
            text-align: center;
            line-height: 36px;
        }
        .styleOk{
            margin: 0 20px;
        }
        .styleClear{
            background-color: #F16473;
            border-color:#F16473;
        }

    }
    .name{
        line-height: 26px;
        font-size: 12px;
        color: @font-color;
    }
    .choosecolor{
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-top: 3px;
        border: 1px solid @border-color;
        cursor: pointer;
        vertical-align: top;
    }
    .choosecolordiv{
        display: inline-block;
        width: 154px;
        height: 26px;
        line-height: 26px;
        background-color: @border-color;
        padding-left: 10px;
        color:@font-color;
    }
}
//动画

</style>
<style lang="less">
.textbox{
    .ivu-tabs{
        overflow: visible;
        .ivu-collapse-content{
           overflow: visible;
        }
        .ivu-slider-button-wrap .ivu-tooltip{
            display: none;
        }
        .ivu-tabs-tabpane{
            position: relative;
        }
    }
   .ivu-select-single .ivu-select-selection .ivu-select-placeholder{
        height: 26px;
        line-height: 26px;
    }
    .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
        height: 26px;
        line-height: 26px
    }
    .ivu-select-single .ivu-select-selection{
        height: 26px;
    }
    .ivu-collapse-content{
        width: 100%;
        padding:  0 20px;
    }
    .ivu-row{
        margin-bottom: 13px;
    }
    .ivu-slider-wrap{
        margin: 0;
        
    }
    .ivu-slider-input .ivu-slider-wrap{
        width: 108px;
        float: left;
        margin: 0;
        margin-top: 3px;
    }
    .ivu-slider-input .ivu-input-number{
        margin: 0;
        height: 26px;
        line-height: 26px;
        width: 66px;
        .ivu-input-number-handler{
            height: 13px;
        }        
    }
    .ivu-input-number-input-wrap{
        height: 26px;
        .ivu-input-number-input{
            height: 26px;
            line-height: 26px;
            background-color: #F6FAF9;
        }
    }
    .ivu-collapse-content{
        .vue-color__sketch{
            position: absolute;
            top:30px;
            right: 0;
            z-index: 1;
        }
    }
}
</style>
<template>
	<div class="textbox" v-show="imghide" @click.stop="showtext">
        <div class="close" @click="imgdialogHide"></div>
        <h5 v-drag>图片／视频组件设置</h5>
          <div class="btn">
            <Button type="warning" class="styleOk" @click="subbtnFn">确定</Button>
            <Button type="primary" class="styleClear" @click="clearstyleFn">清除样式</Button>
        </div>  
        <Tabs type="card" :animated="false">
            <Tab-pane label="展示" class="styles">
                <Collapse accordion>
                    <!--<Panel name="1">
                        显示样式
                        <div slot="content">
                            <Row>
                                <Col span="6" class="name">
                                    滑动方向
                                </Col>
                                <Col span="18">
                                    <Select v-model="hdmode" >
                                        <Option  value="horizontal" >{{"horizontal"}}</Option>
                                        <Option  value="vertical" >{{"vertical"}}</Option>
                                    </Select>
                                </Col>                                                                
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    横向列数
                                </Col>
                                <Col span="18">
                                    <Select v-model="listNumber" >
                                        <Option  value="2" >{{"2"}}</Option>
                                        <Option  value="3" >{{"3"}}</Option>
                                    </Select>
                                </Col>
                            </Row>     
                            <Row>
                                <Col span="6" class="name">
                                    纵向行数
                                </Col>
                                <Col span="18">
                                    <Select v-model="rowNumber" >
                                        <Option  value="2" >{{"2"}}</Option>
                                        <Option  value="3" >{{"3"}}</Option>
                                    </Select>
                                </Col>
                            </Row>
                                           
                        </div>                                            
                    </Panel>-->
                    <Panel name="2">
                        展示样式
                        <div slot="content">                            
                            <Row>
                                <Col span="6" class="name">
                                    背景颜色
                                </Col>
                                <Col span="18">
                                    <div @click.stop="bgcolor()" class="choosecolor" :style="'background-color:'+bgColor"></div>
                                    <div class="choosecolordiv">{{bgColor}}</div>
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxBg" @change-color="onChange" v-model="bgColor" ></sketch-picker>
                                    </div>
                                </Col>
                            </Row>                    
                        </div>                                            
                    </Panel>
                    <Panel name="3">
                        边框样式
                        <div slot="content">
                            <Row>
                                <Col span="6" class="name">
                                    尺寸
                                </Col>
                                <Col span="18">
                                    <Slider show-input v-model="styleCss['borderSize'] " :min="0" :max="10"></Slider>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    样式
                                </Col>
                                <Col span="18">
                                    <Select v-model="styleCss['borderStyle']" placeholder="请选择边框样式">
                                        <Option v-for="item in borderStyle" :value="item.label" :key="item">{{item.value}}</Option>
                                    </Select>
                                </Col>                                                                
                            </Row>
                             <Row>
                                <Col span="6" class="name">
                                    颜色
                                </Col>
                                <Col span="18">
                                    <div @click.stop="bdcolor()" class="choosecolor" :style="'background-color:'+borderColor"></div>
                                    <div class="choosecolordiv">{{borderColor}}</div>
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxbd" @change-color="onChange2" v-model="borderColor" ></sketch-picker>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </Panel>
                </Collapse>
            </Tab-pane>           
        </Tabs>
    </div>
</template>
<script>
    import {Sketch} from 'vue-color';
    import { mapState } from 'vuex';
    import global from '../config/global'
    export default {
		data() {
				return {
                    sketchboxBg:false,//背景颜色选色框
                    sketchboxFt:false,//字体颜色选色框      
                    sketchboxbd:false,//边框颜色选色框
                    styleCss:{
                        "backgroundColor":'',                      
                        "borderSize":0,
                        "borderStyle":'',
                        "borderColor":''
                    },//所有样式写个JSON格式
                    borderStyle:[{"value":'无',"label":'none'},{"value":'直线',"label":'solid'},{"value":'点状线',"label":'dotted'},{"value":'破折线',"label":'dashed'}],
                    a:"",
                    bgColor:'',//背景颜色
                    borderColor:'',//边框颜色
                    hdmode:"",//滑动方向
                    rowNumber:'',//swiper行数
                    listNumber:'',//swiper列数
				}
			},
        props:["fontSize","imghide","swipedata","typeimgvideo",'imgdialogHide',"clearstyleFn","checktypeFN"],
        computed: mapState({ user: state => state.user }),
        components: {
            'sketch-picker': Sketch
        },
        created(){
            this.showtext()
        },
        watch:{
            "styleCss":{
                handler:"styleCssFun",
                "deep":true //监听一个对象
            },
            "hdmode":'styleCssFun',
            "rowNumber":"styleCssFun",
            "listNumber":"styleCssFun",
		},
        updated(){
                this.styleCss = Object.assign(this.styleCss,this.swipedata.headerStyle);
                if(this.typeimgvideo==3){
                    this.hdmode=this.swipedata.introShowTypeDirection.toString();
                    this.rowNumber=this.swipedata.photoHengCount.toString();
                    this.listNumber=this.swipedata.photoZongCount.toString();
                }
                else if(this.typeimgvideo==5){
                    this.hdmode=this.swipedata.dayShowTypeDirection.toString();
                    this.rowNumber=this.swipedata.videoHengCount.toString();
                    this.listNumber=this.swipedata.videoZongCount.toString();
                }
                else if(this.typeimgvideo==6){
                    this.hdmode=this.swipedata.dayShowTypeDirection.toString();
                    this.rowNumber=this.swipedata.workHengCount.toString();
                    this.listNumber=this.swipedata.workZongCount.toString();
                }

                
        },
		methods:{
            showtext(){
                
                //this.$emit("styletext",this.a);
                this.sketchboxBg=false;
                this.sketchboxFt=false;
                this.sketchboxbd=false;
            },
            onChange(val) {                
                this.bgColor = 'rgba('+val.rgba.r+','+val.rgba.g+','+val.rgba.b+','+val.rgba.a+')';
                this.styleCss['backgroundColor'] = this.bgColor; 
            },
            onChange2(val){
                 this.borderColor = 'rgba('+val.rgba.r+','+val.rgba.g+','+val.rgba.b+','+val.rgba.a+')';
                 this.styleCss['borderColor'] = this.borderColor; 
            },
            bgcolor(){//选择背景颜色              
				this.sketchboxBg = true;
                this.sketchboxFt = false;  
            },
            ftcolor(){//选择字体颜色
				this.sketchboxFt = true;      
                this.sketchboxBg=false;          
            },
            bdcolor(){//
                this.sketchboxbd = true;
            },
            styleCssFun(){
                this.$emit("styleimg",this.styleCss,this.hdmode,this.rowNumber,this.listNumber,this.subbtnFn);
            },
            subbtnFn(type,index,moduleId,flag){
                
                // console.log(this.imgdialogHide);
                this.imgdialogHide();
                this.styleCss = Object.assign(this.styleCss,this.swipedata.headerStyle);
                if(this.typeimgvideo==3){
                    // this.hdmode=this.swipedata.introShowTypeDirection.toString();
                    // this.rowNumber=this.swipedata.photoHengCount.toString();
                    // this.listNumber=this.swipedata.photoZongCount.toString();
                    var a={"templateId":this.swipedata.templateId,"moduleIcon":this.swipedata.moduleIcon,"headerStyle":JSON.stringify(this.styleCss),"moduleId":this.swipedata.moduleId,"photoHengCount":this.rowNumber,"photoZongCount":this.listNumber,"introShowTypeDirection":this.hdmode}
                    this.$http.post(global.host+"/cemetery/template/relativesAblum/module/admin/update",a,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            this.checktypeFN(type,index,moduleId,flag);

                        })
                        .catch(function (response) {
                        })
                }
                else if(this.typeimgvideo==5){//视频
                    // this.hdmode=this.swipedata.dayShowTypeDirection.toString();
                    // this.rowNumber=this.swipedata.videoHengCount.toString();
                    // this.listNumber=this.swipedata.videoZongCount.toString();
                    var a={"templateId":this.swipedata.templateId,"moduleIcon":this.swipedata.moduleIcon,"headerStyle":JSON.stringify(this.styleCss),"moduleId":this.swipedata.moduleId,"videoHengCount":this.rowNumber,"videoZongCount":this.listNumber,"dayShowTypeDirection":this.hdmode}
                    this.$http.post(global.host+"/cemetery/template/video/admin/update",a,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                                this.checktypeFN(type,index,moduleId,flag)
                            })
                        .catch(function (response) {
                        })
                }
                else if(this.typeimgvideo==6){//作品
                    // this.hdmode=this.swipedata.nameShowTypeDirection.toString();
                    // this.rowNumber=this.swipedata.workHengCount.toString();
                    // this.listNumber=this.swipedata.workZongCount.toString();
                    var a={"templateId":this.swipedata.templateId,"moduleIcon":this.swipedata.moduleIcon,"headerStyle":JSON.stringify(this.styleCss),"moduleId":this.swipedata.moduleId,"workHengCount":this.rowNumber,"workZongCount":this.listNumber,"nameShowTypeDirection":this.hdmode}
                    this.$http.post(global.host+"/cemetery/template/works/module/edit",a,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                                this.checktypeFN(type,index,moduleId,flag)
                            })
                        .catch(function (response) {
                        })
                }


                
                //console.log(this.styleCss,this.hdmode,this.rowNumber,this.listNumber); //样式,滑动方式,行，列
            }
		}
    }
</script>